<template>
  <div class="contract-wrap">
    <!-- 签署页面 -->
    <div v-if="stepNum < 4">
      <div class="title">
        <div class="title-item">
          <div class="title-img first-img" :class="{'active-img':stepNum>=2}">
            <img src="../../assets/authentication/icon7.png" alt />
          </div>

          <p>开通合同</p>
        </div>
        <div class="title-item">
          <div class="title-img" :class="{'active-img':stepNum>=2}">
            <img v-if="stepNum < 2" src="../../assets/authentication/icon8.png" alt />
            <img v-else-if="stepNum >= 2" src="../../assets/authentication/icon7.png" alt />
          </div>
          <p>生成CA证书</p>
        </div>
        <div class="title-item">
          <div class="title-img last-img" :class="{'active-img':stepNum > 3}">
            <img v-if="stepNum <= 3" src="../../assets/authentication/icon8.png" alt />
            <img v-else-if="stepNum > 3" src="../../assets/authentication/icon7.png" alt />
          </div>
          <p>签署成功</p>
        </div>
      </div>
      <div class="content">
        <p>①.为保障您的合法权益，请及时签署电子合同；</p>
        <p>
          ②.合同签署依据《 合同法 》、《 电子签名法 》流
          程规范， 嵌入国家认证CA机构证书系统， 并采用第
          三方授时及防篡改技术， 确保电子合同具有与传统
          纸质合同等同的法律效力；
        </p>
        <p>
          ③.木头云的电子合同技术服务由杭州尚尚签网络科
          技有限公司提供。
        </p>
      </div>

      <div class="footer">
        <span v-if="stepNum < 4 " class="btn" @click="_ssqDoSsq">开通电子合同服务</span>
        <span v-else class="btn success-btn">签署成功</span>
      </div>
    </div>
    <!-- 状态页面 -->

    <!-- 开通成功 -->
    <div v-else-if="stepNum==4">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon3.png" alt />
        <h2>审核成功</h2>
        <p>你已成为代理商，欢迎使用云木屋</p>
        <span class="success-btn" @click="toHome">前往我的账户</span>
      </div>
    </div>

    <!-- 审核中 -->
    <div v-else-if="stepNum==5">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon6.png" alt />
        <h2>审核中</h2>
        <p class="stepNum5_p">等待平台审核，如有疑问请联系</p>
        <p class="stepNum5_p">400-156-8818</p>
      </div>
    </div>

    <!-- 审核失败 -->
    <div v-else-if="stepNum==6">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon4.png" alt />
        <h2>审核失败</h2>
        <p class="stepNum5_p">可能存在问题，请尝试重新开通</p>
        <p class="stepNum5_p">如有疑问请联系：400-156-8818</p>
        <span class="success-btn" @click="_agentAgain">重新开通</span>
      </div>
    </div>

    <!-- 审核异常 -->
    <div v-else-if="stepNum==7">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon4.png" alt />
        <h2>审核异常</h2>
        <p class="stepNum5_p">审核流程异常</p>
        <p class="stepNum5_p">如有疑问请联系：400-156-8818</p>
      </div>
    </div>

    <!-- 退出当前账号 -->
    <div v-show="stepNum >= 5" class="logout-footer">
      <p @click="handleLogout">退出当前账号 ></p>
    </div>
    <van-dialog
      v-model="logoutDialog"
      class="logout-dialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div name="title" class="dialog-title">提示</div>
      <div name="default" class="dialog-content">确定退出当前账号吗？</div>
      <div class="dialog-footer">
        <div class="enter" @click="handleEnter">确认</div>
        <div class="cancel" @click="()=>{this.logoutDialog = !this.logoutDialog}">取消</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  ssqCheck,
  ssqDoSsq,
  ssqDoCa,
  ssqSignContract,
  checkSign,
  doCreate,
  doSign,
  viewSign,
  agentAgain,
} from "@/api/authentication";
import { removeToken } from "@/utils/auth";
import { Notify } from "vant";
export default {
  data() {
    return {
      stepNum: 0,
      loadFlag: true,
      logoutDialog: false,
    };
  },
  created() {
    this.$toast.loading({
      duration: 0,
      message: "正在检测合同开通流程",
      forbidClick: true,
      loadingType: "spinner",
    });

    setTimeout(() => {
      this._ssqCheck();
    }, 1500);
  },
  methods: {
    signContractHandle() {},
    // 上上签检测
    _ssqCheck() {
      ssqCheck()
        .then((res) => {
          console.log("上上签检测", res);
          if (res.code == 10031) {
            // 未注册上上签
            this.stepNum = 1;
          } else if (res.code == 10032) {
            // 未开通CA证书
            this.stepNum = 2;
          } else if (res.code == 10033) {
            // 已签署上上签和CA
            this.stepNum = 3;
            this._checkSign();
          } else {
            Notify({ type: "warning", message: res.msg || "请求失败" });
          }
        })
        .finally(() => {
          this.$toast.clear();
        });
    },
    // 开通上上签
    _ssqDoSsq() {
      this.$toast.loading({
        duration: 0,
        message: "正在开通",
        forbidClick: true,
        loadingType: "spinner",
      });
      setTimeout(() => {
        if (this.stepNum == 2) {
          this._ssqDoCa();
        } else if (this.stepNum == 3) {
          this._checkSign();
        } else {
          ssqDoSsq().then((res) => {
            if (res.code == 1) {
              this.stepNum = 2;
              this._ssqDoCa();
            } else {
              this.$toast.clear();
              Notify({ type: "warning", message: res.msg || "请求失败" });
            }
          });
        }
      }, 1500);
    },
    // 申请CA证书
    _ssqDoCa() {
      ssqDoCa().then((res) => {
        if (res.code == 1) {
          this.stepNum = 3;
          this._checkSign();
        } else {
          this.$toast.clear();
          Notify({ type: "warning", message: res.msg || "请求失败" });
        }
      });
    },

    // 检测是否代理商接口
    _checkSign() {
      checkSign().then((res) => {
        if (res.code == 1001) {
          // 初始化/签署代理协议
          this._doSign();
        } else if (res.code == 1002) {
          // 审核中
          this.stepNum = 5;
          if (this.loadFlag) {
            this.$toast.clear();
          }
        } else if (res.code == 1003) {
          // 审核失败
          this.stepNum = 6;
          if (this.loadFlag) {
            this.$toast.clear();
          }
        } else if (res.code == 1004) {
          // 审核异常
          this.stepNum = 7;
          if (this.loadFlag) {
            this.$toast.clear();
          }
        } else if (res.code == 1) {
          // 开通成功
          this.stepNum = 4;
          if (this.loadFlag) {
            this.$toast.clear();
          }
        }
      });
    },
    // 代理协议签署
    _doSign() {
      doCreate().then((res) => {
        console.log("代理协议生成res", res);
        if (res.code == 1) {
          doSign()
            .then((res) => {
              console.log("签署合同res", res);
              if (res.code == 1) {
                this.stepNum = 5;
                this.loadFlag = false;
                setTimeout(() => {
                  this._checkSign();
                }, 2000);
              } else {
                Notify({ type: "warning", message: res.msg || "请求失败" });
              }
            })
            .finally(() => {
              this.$toast.clear();
            });
        } else {
          if (this.loadFlag) {
            this.$toast.clear();
          }
          Notify({ type: "warning", message: res.msg || "请求失败" });
        }
      });
    },

    // 审核失败->重新成为代理商
    _agentAgain() {
      agentAgain().then((res) => {
        if (res.code == 1) {
          this.$toast.loading({
            duration: 0,
            message: "正在检测开通流程",
            forbidClick: true,
            loadingType: "spinner",
          });
          setTimeout(() => {
            this._ssqCheck();
          }, 1500);
        }
      });
    },
    // 去首页
    toHome() {
      this.$router.push({ name: "me" });
    },

    // 退出登录
    handleLogout() {
      this.logoutDialog = true;
    },
    // 确认退出登录
    handleEnter() {
      this.logoutDialog = false;
      removeToken();
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.contract-wrap {
  font-size: 26px;
  color: #111;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .title {
    display: flex;
    justify-content: space-between;
    margin: 50px 40px;
    margin-top: 100px;
    .title-item {
      .title-img {
        display: inline-block;
        width: 45px;
        height: 45px;
        margin-bottom: 20px;
        position: relative;
        &::after {
          position: absolute;
          content: " ";
          width: 110px;
          height: 1px;
          background: #b1b1b1;
          left: 55px;
          top: 50%;
          transform: translateY(-50%);
        }
        &::before {
          position: absolute;
          content: " ";
          width: 110px;
          height: 1px;
          background: #b1b1b1;
          right: 55px;
          top: 50%;
          transform: translateY(-50%);
        }
        img {
          width: 100%;
          height: 100%;
        }
        &.first-img {
          &::before {
            display: none;
          }
        }
        &.last-img {
          &::after {
            display: none;
          }
        }
        &.active-img {
          &::after {
            background: #fe6018;
          }
          &::before {
            background: #fe6018;
          }
        }
      }
    }
  }
  .content {
    background: #f9f9f9;
    margin: 0 30px;
    padding: 30px 20px;
    text-align: initial;
    font-size: 28px;
    color: #333;
    line-height: 60px;
  }
  .footer {
    width: 100%;
    color: #fff;
    font-size: 28px;
    line-height: 88px;
    position: absolute;
    bottom: 40px;
    border-top: 1px solid #f2f2f2;
    padding-top: 15px;
    .btn {
      display: inline-block;
      width: 670px;
      height: 88px;
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
      margin: 0 auto;
      &.success-btn {
        background: #ccc;
      }
    }
  }
  .stepNum3-content {
    margin-top: 380px;
    text-align: center;
    .success-img {
      width: 515px;
      height: 225px;
      margin: 0 auto;
      margin-bottom: 40px;
    }
    h2 {
      font-size: 36px;
      font-weight: 600;
      color: #111;
    }
    p {
      padding: 30px 0 50px 0;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      &.stepNum5_p {
        padding: 0;
        padding-bottom: 20px;
        &:first-of-type {
          padding-top: 30px;
        }
        &:last-of-type {
          padding-bottom: 50px;
        }
      }
      span {
        color: #387eff;
      }
    }
    .success-btn {
      display: inline-block;
      width: 310px;
      height: 88px;
      background: rgba(254, 96, 24, 0);
      border: 1px solid rgba(236, 236, 236, 1);
      border-radius: 4px;
      line-height: 88px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(254, 96, 24, 1);
    }
  }
  .footer {
    text-align: center;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
  }
  .logout-dialog {
    width: 650px;
    height: 327px;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 30px 50px;
    .title {
      font-size: 32px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      margin-bottom: 30px;
    }
    .content {
      font-size: 30px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 48px;
      margin-bottom: 60px;
    }
    .footer {
      display: flex;
      justify-content: center;
      > div {
        width: 210px;
        height: 70px;
        line-height: 70px;
        background: rgba(238, 238, 238, 1);
        border-radius: 4px;
        color: #666666;
        &:nth-of-type(1) {
          margin-right: 40px;
          color: #fff;
          background: linear-gradient(
            90deg,
            rgba(255, 147, 3, 1),
            rgba(254, 96, 24, 1)
          );
        }
      }
    }
  }
  .logout-footer {
    font-size: 30px;
    text-align: center;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
  }
  .logout-dialog {
    width: 650px;
    height: 327px;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 30px 50px;
    .dialog-title {
      font-size: 32px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      margin-bottom: 30px;
    }
    .dialog-content {
      font-size: 30px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 48px;
      margin-bottom: 60px;
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
      > div {
        width: 210px;
        height: 70px;
        line-height: 70px;
        background: rgba(238, 238, 238, 1);
        border-radius: 4px;
        color: #666666;
        &:nth-of-type(1) {
          margin-right: 40px;
          color: #fff;
          background: linear-gradient(
            90deg,
            rgba(255, 147, 3, 1),
            rgba(254, 96, 24, 1)
          );
        }
      }
    }
  }
}
</style>